<template>
  <!-- 安全人员库管理 -->
  <base-breadcrumb :title="$route.meta.title">
    <searchData :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false">
      <!-- <title-name title="安全人员库管理"></title-name> -->
      <a-row :gutter="20">
        <!-- 树搜索 -->
        <a-col :span="4" style="border-right: 1px solid #d9d9d9">
          <!-- 公司组织树搜索 -->
          <tree-organization
            ref="treeOrganization"
            @loader="search"
            :autoSelect="false"
            :selectedKeys.sync="selectedKeys"
            :selectOptions.sync="selectOptions"
          />
        </a-col>
        <a-col :span="20">
          <!-- 操作栏 -->
          <div class="mb12">
            <a-button icon="plus" class="btn_right" type="primary" @click="visible = true">添加人员</a-button>
            <a-button
              :disabled="rowSelection.selectedRowKeys.length < 1"
              icon="delete"
              type="danger"
              @click="handleRemoveMore"
              >移除</a-button
            >
          </div>
          <!-- 统计选中项 -->
          <a-alert :showIcon="true">
            <template slot="message">
              <span style="margin-right: 12px">
                已选择:
                <a>
                  <b>{{ rowSelection.selectedRowKeys.length }}</b>
                </a>
                项
              </span>
            </template>
          </a-alert>
          <!-- 表格 -->
          <list-table
            ref="table"
            tableLayout="fixed"
            size="default"
            rowKey="id"
            :columns="columns"
            :request="loadData"
            :alert="true"
            :row-selection="rowSelection"
            show-size-changer
            show-quick-jumper
            showPagination="auto"
          >
            <!-- 表格行操作栏 -->
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleManage(record)">查看</a>
                <a-divider type="vertical" />
                <a
                  @click="
                    result = record
                    visibleResult = true
                  "
                  >移除</a
                >
              </template>
            </span>
            <a-list
              slot="expandedRowRender"
              slot-scope="record"
              item-layout="horizontal"
              :data-source="formatItem(record)"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <div>{{ item }}</div>
              </a-list-item>
            </a-list>
          </list-table>
        </a-col>
      </a-row>
    </a-card>
    <!-- 表单弹窗 -->
    <dialog-edit
      ref="dialogEdit"
      :visible.sync="visible"
      :api="apiEdit"
      :form="{ whether: false }"
      :editModel="editModel"
      @confirm="submitForm"
    ></dialog-edit>
    <!-- 移除提示框 -->
    <result :visible.sync="visibleResult" :form="form">
      <template #title>
        <p style="color: #000">警告提示</p>
      </template>
      <template #subTitle>
        <p style="color: #000">是否确认将此员工从安全人员库中移除</p>
      </template>
      <template #extra>
        <a-button :loading="loading" @click="handleRemove" type="danger">移除</a-button>
        <a-button @click="visibleResult = false" type="primary">取消</a-button>
      </template>
    </result>
  </base-breadcrumb>
</template>

<script>
import dialogEdit from '@/views/quality/securityPerson/employees/dialogEdit.vue' // 表单弹窗
import { STable } from '@/components' // 表格
import { employees } from '@/api/quality/safe' // api
import { getOrgsTree, getStaff } from '@/api/subassembly/TreeSelectOrganization' // api
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import Result from '@/components/Dialog/Result' // 提示
const searchArr = [
  // 搜索框
  {
    name: '员工名称',
    value: 'employeeName',
    type: 'input',
  },
  {
    name: '员工编号',
    value: 'employeeNo',
    type: 'input',
  },
  {
    name: '状态',
    value: 'status',
    type: 'select',
    data: [
      {
        value: '0',
        label: '离职',
      },
      {
        value: '1',
        label: '在职',
      },
    ],
  },
  {
    name: '电话号码',
    value: 'phone',
    type: 'input',
  },
]
const columns = [
  {
    title: '员工名称',
    dataIndex: 'employeeName',
    ellipsis: true,
    width: 100,
  },
  {
    title: '员工编号',
    dataIndex: 'employeeNo',
    ellipsis: true,
    width: 120,
  },
  {
    title: '性别',
    width: 80,
    dataIndex: 'sex',
  },
  {
    title: '电话号码',
    ellipsis: true,
    dataIndex: 'phone',
    width: 120,
  },
  {
    title: '职务',
    ellipsis: true,
    width: 120,
    dataIndex: 'post',
  },
  {
    title: '状态',
    width: 80,
    dataIndex: 'status',
  },
  {
    title: '最高学历专业',
    dataIndex: 'specialitieMax',
    width: '120px',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    dialogEdit,
    TreeOrganization,
    Result,
  },
  computed: {
    // 树节点api
    api() {
      return { getOrgsTree }
    },
    // 非安全人员api
    apiEdit() {
      return employees
    },
    // 表格列表请求参数
    args() {
      let args = this.queryParam
      // 添加树节点id
      if (this.selectOptions.id) {
        args.subItemId = this.selectedKeys[0]
      }
      return args
    },
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      loading: false,
      visibleResult: false,
      // 操作类型：0 添加 1 编辑 3 查看
      editModel: 0,
      // 责任区域弹窗控件
      visible: false,
      // 表格复选框配置
      rowSelection: {
        selectedRowKeys: [],
        onChange(selectedRowKeys) {
          this.selectedRowKeys = selectedRowKeys
        },
      },
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      // 弹窗参数
      form: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        // // 若未选中则不渲染
        // if (!this.args.subItemId) {
        //   return false
        // }
        const requestParameters = Object.assign({}, parameter, this.args)
        return employees.getList(requestParameters).then((res) => {
          this.$refs.table.clearSelected()
          return res
        })
      },
      result: {}, // 查看参数对象
    }
  },
  mounted() {
    let that = this
    // 获取分项工程
    that.$refs.treeOrganization.getList().then((res) => {
      that.search()
    })
  },
  methods: {
    formatItem(e) {
      let datas = []
      let title = { birthday: '生日：', title: '职称：', card: '身份证：', education: '学历：' }
      for (let index in e) {
        let item = e[index]
        for (let i in title) {
          if (i == index) {
            datas.push(title[i] + (e[index] || '暂无'))
          }
        }
      }
      return datas
    },
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
      }
      this.$refs.table.refresh(true)
    },
    // 提交表单
    submitForm(e) {
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: '确认添加？',
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return employees.create(e).then((res) => {
            // if (res.code == 200) {
            that.$message.success('添加成功！')
            that.$refs.dialogEdit.search()
            that.search()
            // that.visible = false
            // } else {
            //   that.$message.warning('添加失败！')
            // }
          })
        },
      })
    },
    // 移除表格选中项
    handleRemoveMore() {
      // 若有选中项
      this.result = {}
      this.visibleResult = true
    },
    // 提交移除表单
    handleRemove() {
      let that = this
      let result = that.result // 点击的行对象
      let ids = [] // 请求参数
      // 配置请求参数，单个或者多选
      if (result.id) {
        ids.push(result.id)
      } else {
        ids = that.rowSelection.selectedRowKeys
      }
      // 按钮加载中，防止重复提交
      that.loading = true
      // 提交移除表单
      employees
        .remove({ ids: ids })
        .then((res) => {
          that.loading = false
          // if (res.code == 200 || res.data.code == 200) {
          that.$message.success('移除成功！')
          // 按钮加载结束
          // 重置列表
          that.$refs.table.loadData()
          that.visibleResult = false
          // 关闭提示弹窗
          // } else {
          //   that.$message.warning('移除失败！')
          // }
        })
        .catch((res) => {
          that.loading = false
        })
    },
    // 查看
    handleManage(b) {
      this.$router.push({
        name: 'expertEdit',
        query: { id: b.id },
      })
    },
  },
}
</script>

